<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>react-form-select</title>
</head>
<body>


<div id="app">


</div>


</body>
<script src="../lib/react/react.development.js"></script>
<script src="../lib/react/react-dom.development.j.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">

    class SelectTestor extends  React.Component{

        constructor(props) {
            super(props);


            this.state={
                 selected:2
            }

            this.selectChange = this.selectChange.bind(this);
        }


        selectChange(event){
            this.setState({
                selected:event.target.value
            })
        }
        render(){
            let  selected = this.state.selected;
            return <div>
                <select value={selected} onChange = {this.selectChange}>
                    <option value="1">天津</option>
                    <option value="2">北京</option>
                    <option value="3">成都</option>
                </select>

                <div>{selected}</div>
            </div>
        }

    }


    ReactDOM.render(<SelectTestor/>,document.getElementById('app'))


</script>


</html>